<template>
	<view class="webview">
		<!-- 内部板块 -->
		<view class="body-show-box">
			<!-- 顶部收索板块 -->
			<view class="body-show-title-box">
				<view class="search-box">
					<u-search @search="searchFunc" @custom="searchFunc" @clickIcon="searchFunc" @clear="getWebviewPage" v-model="searchValue" :show-action="true" actionText="搜索" :animation="true" :clearabled="true"></u-search>
				</view>
			</view>
			<!-- 内容板块 -->
			<view class="" v-if="searchStatus == false" v-for="(item, index) in dataList" :key="index">
				<view class="element-title" @click="goInfoPage(item)">
					{{item.name}}
				</view>
				<u-row gutter="16" justify="space-around" >
					<u-col span="4" v-for="(child,ids) in item.childList" :key="ids">
						<view class="element-btn" @click="goInfoPage(child)">{{child.name}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="" v-if="searchStatus == true">
				<u-row gutter="16" justify="space-around" >
					<u-col span="4" v-for="(childs,idss) in dataList" :key="idss">
						<view class="element-btn" @click="goInfoPage(childs)">{{childs.name}}</view>
					</u-col>
				</u-row>
			</view>
			<!-- 内容为空 -->
			<view class="show-null-icon" v-if="dataList.length == 0">
				<!-- <u-empty
				        mode="data"
				        icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					searchValue: '',
					 titleHeight: '',
					 dataList: [],
					 searchStatus: false,
				} 
			},
			onLoad() {
				// 获取首页数据
				this.getWebviewPage()
			},
			methods: {
				// 进入详情页
				goInfoPage(item){
					uni.navigateTo({
						url: './acupoint?id=' + item.threeId + '&name=' + item.name
					})
				},
				// 确定搜索
				searchFunc(){
					console.log("用户点击了搜索：" + this.searchValue);
					// 调取接口
					if(this.searchValue == ''){
						this.getWebviewPage()
					}else {
						this.$api.request.getSearchType({
							name: this.searchValue
						}, res => {
							if(res.code == 200){
								console.log(res);
								this.searchStatus = true
								this.dataList = res.data
							}
						})
					}
				},
				// 获取首页数据
				getWebviewPage(){
					this.$api.request.getTypeList({},res => {
						console.log(res);
						if(res.code == 200){
							this.searchStatus = false
							this.dataList = res.data
						}
					})
				}
			}
		}
</script>

<style>
	.webview {
		width: 100vw;
		height: 100vh;
		background-image: url("https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/jiudaifu/bgjingluo.jpg");
		background-size: 100% 100%;
		z-index: 99;
	}
	.back_pages {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
	}
	.body-show-box{
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.body-show-title-box{
		width: 100vw;
		height: 270rpx;
		background-image: url("https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/jiudaifu/top_main.png");
		background-size: 100%;
		margin-bottom: 40rpx;
		display: flex;
		align-items: flex-end;
	}
	.element-title{
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		border: 1px solid #ccc;
		font-weight: bold;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-bottom: 60rpx;
	}
	.element-btn{
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 1px dashed #007130;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-bottom: 80rpx;
	}
	.search-box{
		width: 60%;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.show-null-icon{
		width: 100vw;
		height: calc(100% - 270rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
